<template>
    <div class="user">
        <van-nav-bar title="我的邀请海报" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>

        <div class="user-order3" ref="imageElement" id="poster">
            <div class="userImg">
                <img v-if="qrcode2" crossorigin="anonymous" :src="qrcode2" alt="" srcset="">
                <img v-else src="../../assets/w700d1q75cms.jpg">
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #000000;margin-top: 22px;">
                    {{
                        userInfo.nickname }}</div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #999999;;margin-top: 22px;">
                    {{
                        userInfo.mobile }}</div>

                <!-- <div :style="{ backgroundImage: 'url(' + userInfo.qrcode + ')', width: '187px', height: '187px' }">
                </div> -->
                <img :src="userInfo.qrcode" crossorigin="anonymous"
                    style="margin-top: 33px;width: 187px;height: 187px;border-radius: 0;">
            </div>

        </div>

        <div style="margin-top:40px;margin-left: 40px;">
            <van-button round block type="primary" style="background-color: #389138;width: 310px;height: 44px;"
                @click="takeScreenshot">保存海报</van-button>
        </div>

    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas';
export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            screenshot: null,
            qrcode: "",
            qrcode2: ""
        };
    },
    mounted() {
        var that = this
        this.$nextTick(function () {
            // that.img2base64(that.userInfo.qrcode, 'Anonymous').then(function (res) {
            //     that.qrcode = res;

            // })
            that.img2base64(that.userInfo.avatar, 'Anonymous').then(function (res) {
                that.qrcode2 = res;
            });
        })

    },
    methods: {

        // 将图片转为base64格式
        img2base64(url, crossOrigin) {
            return new Promise(resolve => {
                const img = new Image();

                img.onload = () => {
                    const c = document.createElement('canvas');

                    c.width = img.naturalWidth;
                    c.height = img.naturalHeight;

                    const cxt = c.getContext('2d');

                    cxt.drawImage(img, 0, 0);

                    // 得到图片的base64编码数据
                    resolve(c.toDataURL('image/jpg'));
                };

                // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
                crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
                img.src = url;
            });
        },

        onClickLeft() {
            this.$router.back()
        },

        getDpr() {
            if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                return window.devicePixelRatio;
            }
            return 1;
        },

        takeScreenshot() {

            html2canvas(document.querySelector('#poster'), {
                useCORS: true, // 【重要】开启跨域配置
                scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
                allowTaint: true, // 允许跨域图片
            }).then((canvas) => {
                const imgData = canvas.toDataURL('image/jpeg', 1.0);
                var image = new Image();
                image.src = imgData;
                fetch(image.src).then((res) => {
                    console.log('res', res)
                    const imageUrl = res.url
                    this.savePicture(imageUrl)
                   
                })
            
            });

        },
        savePicture(base64) {
            var arr = base64.split(',');
            var bytes = atob(arr[1]);
            let ab = new ArrayBuffer(bytes.length);
            let ia = new Uint8Array(ab);
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            var blob = new Blob([ab], { type: 'application/octet-stream' });
            var url = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download =this.userInfo.nickname + '的海报.png';
            var e = document.createEvent('MouseEvents');
            e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            URL.revokeObjectURL(url);
        }


    },

    computed: {
        ...mapGetters(['userInfo'])

    }
}
</script>

<style lang="scss" scoped>
.userImg {
    text-align: center;
    padding-top: 66px;

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
}

.user-order3 {
    width: 702px;
    height: 800px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>